<template>
  <div class="container">
    <el-row class="form-body">
      <h2>忘记密码</h2>
      <el-form ref="form" :model="forgotForm" label-width="0px" :rules="rules">
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="forgotForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input placeholder="请输入新密码" v-model="forgotForm.newPassword" show-password></el-input>
        </el-form-item>
        <el-form-item prop="reNewPassword">
          <el-input placeholder="请再次输入新密码" v-model="forgotForm.reNewPassword" show-password></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input placeholder="请输入邮箱" v-model="forgotForm.email"></el-input>
        </el-form-item>
        <el-form-item prop="smsCode">
          <el-input placeholder="请输入短信验证码" v-model="forgotForm.smsCode">
            <template #append>
              <el-button
                type="primary"
                @click="sendCode"
                class="code-button"
                :disabled="isCountingDown">
                {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="form-confirm">提交</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toLogin" class="form-confirm">返回登录</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ForgotPassword",
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value !== this.forgotForm.newPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };

    return {
      forgotForm: {
        username: '',
        newPassword: '',
        reNewPassword: '',
        email: '',
        smsCode: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        reNewPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        smsCode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ]
      },
      isSending: false,
      countdown: 60
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.axios.post("/user/forgotPassword",{
            username:this.forgotForm.username,
            password:this.forgotForm.password,
            rePassword:this.forgotForm.rePassword,
            phone:this.forgotForm.phone,
            smsCode:this.forgotForm.smsCode
          })
            .then(function (response) {
              console.log(response.data.message)
              if(response.data.code === 0){
                _this.$message.success(response.data.message);
              }
              else {
                _this.$message.error(response.data.message);
              }
              _this.$router.replace('/user/login')
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      });
    },

    sendCode() {
      // 验证邮箱格式
      if (!this.registerForm.email) {
        this.$message.error('请输入邮箱');
        return;
      }

      if (!this.validateEmail(this.registerForm.email)) {
        this.$message.error('请输入有效的邮箱地址');
        return;
      }
      if (this.isCountingDown) return;

      const _this = this;
      this.axios.post("/sendCode", {
        email: this.registerForm.email
      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        transformRequest: [function (data) {
          let ret = '';
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
          }
          return ret;
        }]
      })
        .then(function (response) {
          if (response.data.code === 0) {
            _this.$message.success('验证码发送成功');
            _this.startCountdown();
          } else {
            _this.$message.error(response.data.message || '验证码发送失败');
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error('验证码发送失败');
        });
    },

    toLogin() {
      this.$router.replace('/user/login');
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  background-image: url("../../static/home.png");
  background-size: cover;
  position: fixed;
  left: 0px;
  top: 0px;
  padding-top: 30px;
}

.form-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  border-radius: 10px;
  margin: 0 auto;
  width: 25%;
  min-width: 300px;
  padding: 30px 30px 15px 30px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.9);
}

.form-confirm {
  width: 100%;
  background-color: #585858;
  border: 2px solid #484848;
  border-radius: 4px;
}
</style>
